import { Text, View } from '@react-pdf/renderer';
import { styles } from './style';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useCmpDataStore } from '@/stores/cmpDataStore';


export const PdfComparisonSection = () => {

  const basicData = useBasicDataStore(state => state.basicData) as StoreInfo
  const cmpData = useCmpDataStore(state => state.cmpData) as StoreInfo

  const {
    basicInfo: {
      storeId: bId = '--',
      storeName: bName = '--',
      province: bProvince = '--',
      city: bCity = '--',
      storeType: bType = '--',
      areaSize: bArea = 0,
      openingDate: bDate = '--',
      tags: [bTag = '无标签'] = []
    } = {},
    annualData: {
      yearAmount: bAmount = 0,
      yearGrowth: bGrowth = '0%',
      avgCustomerValue: bValue = 0,
      rating: bRating = '0',
      reviews: {
        positive: bPositive = 0,
        negative: bNegative = 0
      } = {}
    } = {}
  } = basicData || {};

  const {
    basicInfo: {
      storeId: cId = '--',
      storeName: cName = '--',
      province: cProvince = '--',
      city: cCity = '--',
      storeType: cType = '--',
      areaSize: cArea = 0,
      openingDate: cDate = '--',
      tags: [cTag = '无标签'] = []
    } = {},
    annualData: {
      yearAmount: cAmount = 0,
      yearGrowth: cGrowth = '0%',
      avgCustomerValue: cValue = 0,
      rating: cRating = '0',
      reviews: {
        positive: cPositive = 0,
        negative: cNegative = 0
      } = {}
    } = {}
  } = cmpData || {};


  // 渲染数据行
  const renderDataRow = (label: string, value: string | number) => (
    <Text style={styles.dataRow}>
      {label}: <Text style={{ color: '#333' }}>{value}</Text>
    </Text>
  );

  return (
    <View style={styles.comparisonContainer}>
      {/* 当前门店 */}
      <View style={styles.column}>
        <Text style={styles.storeTitle}>{bName}</Text>
        {renderDataRow('门店ID', bId)}
        {renderDataRow('所在省份', bProvince)}
        {renderDataRow('所在城市', bCity)}
        {renderDataRow('年营业额', `${(bAmount / 10000).toFixed(2)} 万元`)}
        {renderDataRow('年增长率', bGrowth)}
        {renderDataRow('连锁方式', bType)}
        {renderDataRow('类型划分', bTag)}
        {renderDataRow('客单价', `${bValue} 元/人`)}
        {renderDataRow('综合评分', `${bRating} 分`)}
        {renderDataRow('评论数', `${bPositive} 好评 / ${bNegative} 差评`)}
        {renderDataRow('占地面积', `${bArea} m³`)}
        {renderDataRow('开业日期', bDate)}
      </View>

      {/* 对比门店 */}
      <View style={styles.column}>
        <Text style={styles.storeTitle}>{cName}</Text>
        {renderDataRow('门店ID', cId)}
        {renderDataRow('所在省份', cProvince)}
        {renderDataRow('所在城市', cCity)}
        {renderDataRow('年营业额', `${(cAmount / 10000).toFixed(2)} 万元`)}
        {renderDataRow('年增长率', cGrowth)}
        {renderDataRow('连锁方式', cType)}
        {renderDataRow('类型划分', cTag)}
        {renderDataRow('客单价', `${cValue} 元/人`)}
        {renderDataRow('综合评分', `${cRating} 分`)}
        {renderDataRow('评论数', `${cPositive} 好评 / ${cNegative} 差评`)}
        {renderDataRow('占地面积', `${cArea} m³`)}
        {renderDataRow('开业日期', cDate)}
      </View>
    </View>
  );
};